<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
* { margin: 0px; padding: 0px; }
html, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {margin: 0px;padding: 0px;border: 0px;outline: 0px;font-weight: inherit;font-style: inherit;}
ul, ol {list-style: none;}
strong {font-weight: bold;}
a img { border: 0; }
a { text-decoration: none;}
	/* hai anh */	
.clear{ clear:both;}
.nav-article{margin:25px;}

ul.nav-account {
    /*background:#cecece; height:31px; width:957px;*/
}

.nav-account li.news1 {
    display: block;
    float: left;
    height: 33px;
    padding-right:0px; width:250px; margin-right:3px;
}
.nav-account li.news2 {
    display: block;
    float: left;
    height: 32px;
    padding-right:0px; width:183px; margin-right:3px;
}
.nav-account li.news3 {
    display: block;
    float: left;
    height: 32px;
    padding-right:0px; width:184px; margin-right:3px;
}
.nav-account li.news4 {
    display: block;
    float: left;
    height: 32px;
    padding-right:0px; width:325px; 
}
ul.nav-account li.unselect_tab {
    background: #e7e7e7;
	/*width:120px;*/
	
}
ul.nav-account li.selected_tab {
 /*  border:1px solid #7f8080; border-bottom:1px solid #cecece;*/
  
}
ul.nav-account li.news1.selected_tab{ background:url(cat1_tren.png) no-repeat; width:251px; height:35px;}
ul.nav-account li.news2.selected_tab{ background:url(cat2_tren.png) no-repeat; width:184px; height:35px;}
ul.nav-account li.news3.selected_tab{ background:url(cat3_tren.png) no-repeat; width:184px; height:35px;}
ul.nav-account li.news4.selected_tab{ background:url(cat4_tren.png) no-repeat; width:327px; height:35px;}
ul.nav-account li.unselect_tab a span {
    color: #414141;
    font-size: 14px;
    position: relative;
    top:7px; left:15px;
}
ul.nav-account li.selected_tab a span {
    color: #cd2734;
    font-size: 14px;
    position: relative;
  	top:7px; left:15px;
}
.content_1,.content_2,.content_3,.content_4{/*border:1px solid #7f8080; height:162px; */}

.content_1{background:url(cat1_duoi.png) no-repeat; width:956px; height:163px;}
.content_2{background:url(cat2_duoi.png) no-repeat; width:956px; height:163px;}
.content_3{background:url(cat3_duoi.png) no-repeat; width:956px; height:163px;}
.content_4{background:url(cat4_duoi.png) no-repeat; width:954px; height:163px;}
#content_1 img{float:left; border:1px solid #acacac; margin:13px;}
#content_1 .brief{ float:left; width:686px; margin:10px; margin-left:0px;}
.brief span {color:#ae1414;}
.brief p{ color:#585858;}
.chitiet-btn{background:#ae1414; width:76px; height:20px; margin-top:10px;}
.chitiet-btn span{color:#FFF; font-size:13px; padding-left:5px;}

</style>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
</head>

<body>
	<div class="nav-article">           
    		<ul  class="nav-account">
    			<li class="news1 selected_tab">
                 <a href="javascript:void(0)" title="content_1" ><span style="">menu 1 menu 1</span></a>       
       		</li>
           		<li class="news2 unselect_tab">
                  <a href="javascript:void(0)" title="content_2"><span style="">menu 2 menu 1 menu 1</span></a>
        	</li>
                <li class="news3 unselect_tab">
                    <a href="javascript:void(0)" title="content_3"><span style="">menu 3 menu 1menu 1</span></a>
                </li>
            	<li class="news4 unselect_tab">
   		       	<a href="javascript:void(0)" title="content_4"><span style="">me nu4 menu 1menu 1menu 1</span></a>
        	</li>
    		</ul>
          <div class="clear"></div> 
        <div id="content_1" style="display: block;" class="account content_1">
        	<img src="img-tintuc.png" alt="" width="222" height="132" />
            <div class="brief">
            	<span> Tiêu đề </span>
                <p> tóm tắt tin tức tóm tắt tin tức tóm tắt tin tức tóm tắt tin tức tóm tắt tin tức tóm tắt tin tức tóm tắt tin tức tóm tắt tin tức</p>
                <div class="chitiet-btn"><span>Chitiet >> </span></div>
                
            </div>
        </div>
        <div id="content_2"  style="display: none;" class="account content_2">
        noi dung 2
        </div>
        <div id="content_3" style="display: none;" class="account content_3">
        noi dung 3
    	</div>
     	<div id="content_4" style="display: none;" class="account content_4">
        noi dung 4
    	</div>
</div>
 <script>
 	  $(".nav-account a").click(function () {
		$(".selected_tab").removeClass("selected_tab").addClass('unselect_tab');
		$(this).parent().addClass("selected_tab").removeClass('unselect_tab');
		$(".account").slideUp();
		var content_show = $(this).attr("title");
		$("."+content_show).slideDown();
	  }); 
	   
 </script>
</body>
</html>
